<template>
  <div>
    <h3>v-text</h3>
    <div v-text="'hello vue'">hello world</div>
    <h2>v-html</h2>
    <div v-html="'<span style=&quot;color: red&quot;>hello vue</span>'">
      hello world
    </div>
    <h3>v-show</h3>
    <div>
      <!-- 
        v-show 通过 display 属性实现显示隐藏
        隐藏 => display: none 
      -->
      <p v-show="show">hello vue</p>
      <button @click="show = !show">change show</button>
    </div>
    <h3>v-if v-else-if v-else</h3>
    <div>
      <!-- v-if 通过创建和销毁元素实现显示隐藏 -->
      <p v-if="number === 1">hello world {{ number }}</p>
      <p v-else-if="number === 2">hello vue {{ number }}</p>
      <p v-else>hello alomy {{ number }}</p>
    </div>
    <h3>v-for v-bind</h3>
    <div>
      <!-- v-bind:key 等同于 :key -->
      <!-- <p v-for="num in [1, 2, 3]" v-bind:key="num">hello {{ num }}</p> -->
      <p v-for="num in [1, 2, 3]" :key="num">hello {{ num }}</p>
    </div>
    <h3>v-on</h3>
    <div>
      <!-- @click 等同于 v-on:click -->
      <!-- <button v-on:click="number += 1">number++</button> -->
      <button @click="number += 1">number++</button>
    </div>
    <h3>v-model</h3>
    <input type="text" v-model="message" />
    <h3>v-pre</h3>
    <div v-pre>{{ this will not be compiled }}</div>
    <h3>v-once</h3>
    <p v-once>{{ number }}</p>
    <!-- v-cloak 使用频率较低 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      number: 1,
      message: "hello alomy",
    };
  },
};
</script>
